<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
        }

        .layout-header {
            background: #2c3e50;
        }

        .layout-body {
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;

        }

        .layout-aside {
            background: #545c64;

        }
        .layout-main{
            background-image: url("./images/1412.gif");
            background-size: 200px 200px;
            background-repeat: no-repeat;
            background-position: 100% 100%;
        }

        .el-menu-vertical-demo{
            border: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="layout-header">
            <div>
                <h1 style="color: aliceblue; margin: 12px 0;">PetHome运营管理平台
                <div style="text-align: right;font-size: 15px;float: right">
                    欢迎{{user.nick}}回来!
                    <el-button type="text" @click="logout()">退出登录</el-button>
                </div>
                </h1>
            </div>
        </el-header>
        <el-container class="layout-body">
            <el-aside class="layout-aside">
                <!--      左边栏，显示菜单-->
                <!-- el-menu是整个菜单 -->
                <el-menu router default-active="/admin/admins/list"
                         background-color="#545c64"
                         text-color="#fff"
                         active-text-color="#ffd04b"
                         class="el-menu-vertical-demo">
                    <!-- el-submenu是允许包含子级的菜单，但此标签本身并不是菜单项 -->
                    <el-submenu index="1">
                        <!-- 在el-submenu下的template用于配置包含子菜单的父级项 -->
                        <!-- 例如：在“用户管理”下有“用户列表”和“添加用户”，此处使用template配置的就是“用户管理” -->
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>管理员管理</span>
                        </template>
                        <el-menu-item index="/admin/admins/list">
                            <i class="el-icon-document-checked"></i>
                            <span>管理员列表</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/admins/add-new">
                            <i class="el-icon-document-add"></i>
                            <span>添加管理员</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item index="2x">
                            <i class="el-icon-document-checked"></i>
                            <span>商品列表</span>
                        </el-menu-item>
                        <el-menu-item index="2y">
                            <i class="el-icon-document-add"></i>
                            <span>添加商品</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>品牌管理</span>
                        </template>
                        <el-menu-item index="/admin/brand/list">
                            <i class="el-icon-document-checked"></i>
                            <span>品牌列表</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/brand/add-new">
                            <i class="el-icon-document-add"></i>
                            <span>品牌相册</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>相册管理</span>
                        </template>
                        <el-menu-item index="/admin/album/list">
                            <i class="el-icon-document-checked"></i>
                            <span>相册列表</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/album/add-new">
                            <i class="el-icon-document-add"></i>
                            <span>添加相册</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>类别管理</span>
                        </template>
                        <el-menu-item index="/admin/category/list">
                            <i class="el-icon-document-checked"></i>
                            <span>类别列表</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/category/add-new">
                            <i class="el-icon-document-add"></i>
                            <span>添加类别</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>属性管理</span>
                        </template>
                        <el-menu-item index="/admin/attribute/list">
                            <i class="el-icon-document-checked"></i>
                            <span>属性列表</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/attribute/add-new">
                            <i class="el-icon-document-add"></i>
                            <span>添加属性</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="7">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>属性模板管理</span>
                        </template>
                        <el-menu-item index="/admin/attribute-template/list">
                            <i class="el-icon-document-checked"></i>
                            <span>属性模板列表</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/attribute-template/add-new">
                            <i class="el-icon-document-add"></i>
                            <span>添加属性模板</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="8">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>用户管理</span>
                        </template>
                        <!--            el-menu-item 菜单项-->
                        <el-menu-item index="/admin/user/list">
                            <i class="el-icon-document-checked"></i>
                            <span>用户列表</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/user/add-new">
                            <i class="el-icon-document-add"></i>
                            <span>添加用户</span>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-main class="layout-main">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/admin/admins/list">成员管理</a></el-breadcrumb-item>
                </el-breadcrumb>
                <h3 style="margin: 20px 0 20px 0">成员管理</h3>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="ID"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="nickname"
                            label="昵称">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="手机号码">
                    </el-table-column>
                    <el-table-column
                            prop="email"
                            label="电子邮箱">
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            label="职位">
                    </el-table-column>
                    <el-table-column
                            prop="lastLoginIp"
                            label="最后登录ip">
                    </el-table-column>
                    <el-table-column
                            prop="enable"
                            label="是否启用"
                            width="90"
                            align="center">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.enable"
                                    @change="handleChangeEnable(scope.$index, scope.row.id, scope.row.enable)"
                                    :active-value="1"
                                    :inactive-value="0"
                                    active-color="#13ce66"
                                    inactive-color="#999">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    type="primary" icon="el-icon-edit" circle
                                    @click="handleEdit(scope.row.id)"></el-button>
                            <el-button
                                    type="danger"
                                    icon="el-icon-delete" circle
                                    @click="openDeleteConfirm(scope.row.id)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<!--引入Vue框架-->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],
                user: {}
            }
        },
        methods: {
            logout() {
                axios.get("/logout").then(function () {
                    location.href = "/adminLogin.html";
                })
            },
            handleSelect(index) {
                console.log(index);
                if (index == "1-2") {
                    console.log("添加分类");
                    this.$prompt('请输入分类名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(({value}) => {
                        console.log("分类名：" + value)
                        let name = value;
                        if (name == null) {
                            v.$message.error("分类名称不能为空！")
                            return;
                        }
                        axios.get("/category/insert?name=" + name).then(function () {
                            location.reload();
                        })
                    }).catch(() => {

                    });
                } else if (index == "2-2") {
                    console.log("添加轮播图");
                    location.href = "/insertBanner.html";
                } else if (index == "3-2") {
                    console.log("添加商品");
                    location.href = "/insertProduct.html";
                } else {
                    v.selectedIndex = index;
                }
            },
            categoryDelete(index, category) {
                axios.get("/category/delete?id=" + category.id).then(function () {
                    v.categoryArr.splice(index, 1);
                })
            },

            productDelete(index, product) {
                axios.get("/product/delete?id=" + product.id).then(function () {
                    v.productArr.splice(index, 1);
                })
            },
            bannerDelete(index, banner) {
                axios.get("/banner/delete?id=" + banner.id).then(function () {
                    v.bannerArr.splice(index, 1);
                })
            }
        },
        created: function () {
            axios.get("/currentUser").then(function (response) {
                v.user = response.data;
                if (response.data == "") {
                    location.href = "/adminLogin.html"
                }
            })
            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            })
            axios.get("/banner/select").then(function (response) {
                v.bannerArr = response.data;
            })
            axios.get("/product/select").then(function (response) {
                v.productArr = response.data;
            })
        }
    })
</script>
</html>